<template>
  <div style="width: 95%;margin: auto;margin-top: 100px">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">

          <!-- 首页表格 -->
          <el-card shadow= 'hover' class="tableInfo">
            <div slot="header">
              <span style="font-weight: bold">今日数据</span>
            </div>
            <div>
              <el-table
                :data="tableData"
                stripe
                border
                height="450px"
                style="width: 100%">
                <el-table-column prop="date" label="日期" width="120"></el-table-column>
                <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <!-- 柱状图 -->
        <el-card style="height: 260px">
          <div style="height:260px;" ref="barEcharts"></div>
        </el-card>

          <el-card style="width: 32.5%;height: 265px;marginRight: 1%;margin-top: 1%;float: left">
            <div style="width: 100%;height: 265px;" ref="pieEcharts1"></div>
          </el-card>

        <el-card style="width: 32.5%;height: 265px;marginRight: 1%;margin-top: 1%;float: left">
          <div style="width: 100%;height: 265px;" ref="pieEcharts2"></div>
        </el-card>

        <el-card style="width: 32.5%;height: 265px;margin-top: 1%;float: left">
          <div style="width: 100%;height: 265px;" ref="pieEcharts3"></div>
        </el-card>
<!--          <el-card style="width:65%;height: 865px">-->
<!--            <div style="height: 865px"><el-calendar v-model="value"></el-calendar></div>-->
<!--          </el-card>-->

      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "index",
  data() {
    return {
      imgUrl:"",
      value: new Date(),
      date7jin:[],
      tableData: [{
        date: '2016-05-03',
        name: '王',
        address: 'text1'
      }, {
        date: '2016-05-02',
        name: '王1',
        address: 'text1'
      }, {
        date: '2016-05-04',
        name: '王2',
        address: 'text1'
      }, {
        date: '2016-05-01',
        name: '王3',
        address: 'text1'
      }, {
        date: '2016-05-08',
        name: '王4',
        address: 'text1'
      }, {
        date: '2016-05-06',
        name: '王5',
        address: 'text1'
      }, {
        date: '2016-05-06',
        name: '王6',
        address: 'text1'
      }]
    }
  },created() {
    var myDate = new Date() // 获取今天日期
    myDate.setDate(myDate.getDate() - 6)
    var dateTemp
    var flag = 1
    for (var i = 0; i < 7; i++) {
      dateTemp = (myDate.getMonth() + 1) + '-' + myDate.getDate()
      this.date7jin.push(dateTemp)
      myDate.setDate(myDate.getDate() + flag)
    }

  },
  mounted() {
    this.initPieEcharts1()
    this.initPieEcharts2()
    this.initPieEcharts3()
    this.initBarEcharts()
  },
  methods:{
    //柱状图
    initBarEcharts () {
        //	此dom为echarts图标展示dom
        let myChart = echarts.init(this.$refs.barEcharts)
        let option = {
          title: {
            text: '销货|购货'
          },
          tooltip: {},
          legend: {
            data: ['销货','购货']
          },
          xAxis: {
            data: this.date7jin
          },
          yAxis: {},
          series: [
            {
              name: '销货',
              type: 'bar',
              data: [5, 20, 36, 10, 10,15,20]
            },
            {
              name: '购货',
              type: 'bar',
              data: [10, 18, 34, 8, 12,10,10]
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);
    },
    //饼图1
    initPieEcharts1() {
        let myChart = echarts.init(this.$refs.pieEcharts1);
        let option= {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '0%',
            left: 'left'
          },
          series: [
            {
              name: '订单信息',
              type: 'pie',
              radius: ['20%', '65%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'left'
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: '成交订单量' },
                { value: 735, name: '退款订单量' },
                { value: 580, name: '浏览量' },
                { value: 484, name: '加购量' },
                { value: 300, name: '预购量' }
              ]
            }
          ]
        }
        myChart.setOption(option,true);
    },
    //饼图2
    initPieEcharts2() {
      let myChart = echarts.init(this.$refs.pieEcharts2);
      let option= {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '0%',
          left: 'left'
        },
        series: [
          {
            name: '订单信息',
            type: 'pie',
            radius: ['20%', '65%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'left'
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '成交订单量' },
              { value: 735, name: '退款订单量' },
              { value: 580, name: '浏览量' },
              { value: 484, name: '加购量' },
              { value: 300, name: '预购量' }
            ]
          }
        ]
      }
      myChart.setOption(option,true);
    },
    //饼图
    initPieEcharts3() {
      let myChart = echarts.init(this.$refs.pieEcharts3);
      let option= {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '0%',
          left: 'left'
        },
        series: [
          {
            name: '订单信息',
            type: 'pie',
            radius: ['20%', '65%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'left'
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '成交订单量' },
              { value: 735, name: '退款订单量' },
              { value: 580, name: '浏览量' },
              { value: 484, name: '加购量' },
              { value: 300, name: '预购量' }
            ]
          }
        ]
      }
      myChart.setOption(option,true);
    }
  }
}
</script>

